<!DOCTYPE html>
<html>
<head>
    <title>员工端</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

    <link rel="stylesheet" href="/static/web/css/weui.min.css">
    <link rel="stylesheet" href="/static/web/css/jquery-weui.css">

</head>
<style lang="scss">
    .share_img {
        width: 100%;
        margin: 10px 0;
    }

    .share_img img {
        width: 100%;
    }

    .share_title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 94.7%;
        margin: 0 auto;
        align-items: center;
    }

    .share_right {
        font-size: 12px;
        color: #888;
    }

    .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .block {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 94.7%;
        margin: 20px auto 0;
    }

    .head {
        width: 60px;
        height: 60px;
        margin: 0 10px;
    }

    .head img {
        width: 100%;
        height: 100%;
    }

    .block_con {
        flex: 1;
    }

    .block_right {
        color: #3074f0;
    }

    .pager {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .pager li {
        list-style: none;
        text-decoration: unset;
        font-size: 24px;
    }
</style>
<body ontouchstart>
<div class="share_img">
    <img src="/static/web/image/share.png" alt="">
</div>
<div class="share_title">
    <div class="share_left">
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <input type="text" class="layui-input" id="dateTime" value="{$dateTime}">
        </div>
    </div>
    <div class="share_right">
        共计{$count}人
    </div>
</div>


<div class="item">
    {volist name="lists.data" id="vo"}
    <div class="block">
        <div class="head">
            <img src="{$vo.head}" alt="">
        </div>
        <div class="block_con">
            <div class="block_con_title">
                {$vo.name}
            </div>
            <div class="block_con_address">
                {$vo.city}{$vo.address}
            </div>
        </div>
        <div class="block_right">
            已预约
        </div>
    </div>
    {/volist}
</div>

{$page|raw}

<script src="/static/web/js/jquery-2.1.4.js"></script>
<script src="/static/web/js/fastclick.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });

</script>
<script src="/static/web/js/jquery-weui.js"></script>
<script src="/static/web/js/city-picker.js"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" charset="utf-8">
    wx.config({$config|raw});
    wx.checkJsApi({
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function (res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
    wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
            title: '吸之声送您价值988元深层清洁除螨体验', // 分享标题
            desc: '吸之声-家庭除螨专家', // 分享描述
            link: "{:url('index/index',[],false,true)}?user_openid={$openid}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "{:url('/static/web/image/logo.png',[],false,true)}", // 分享图标
            success: function () {
                // 设置成功
            }
        })
        wx.updateTimelineShareData({
            title: '吸之声送您价值988元深层清洁除螨体验', // 分享标题
            desc: '吸之声-家庭除螨专家', // 分享描述
            link: "{:url('index/index',[],false,true)}?user_openid={$openid}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "{:url('/static/web/image/logo.png',[],false,true)}", // 分享图标
            success: function () {
                // 设置成功
            }
        });

    });
    wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log(res)
    });
</script>
<script type="text/javascript">
    $("#showTooltips").click(function () {
        var tel = $('#tel').val();
        var code = $('#code').val();
        if (!tel || !/1[3|4|5|7|8]\d{9}/.test(tel)) $.toptip('请输入手机号');
        else if (!code || !/\d{6}/.test(code)) $.toptip('请输入六位手机验证码');
        else $.toptip('提交成功', 'success');
    });

    function btn_submit() {
        let name = $("#name").val()
            , mobile = $('#mobile').val()
            , city = $("#city").val()
            , address = $("#address").val();
        if (!name) {
            $.toptip("请输入姓名");
        }
        if (!mobile || !/1[3|4|5|7|8]\d{9}/.test(mobile)) {
            $.toptip("请输入正确的手机号");
        }
        if (!city) {
            $.toptip("请选择区域")
        }
        if (!address) {
            $.toptip("请输入详情地址")
        }

        $.post("{:url('save')}", {
            name: name,
            mobile: mobile,
            city: city,
            address: address
        }, function (res) {
            console.log(res)
        });

    }
</script>
<link rel="stylesheet" href="/static/extends/layui-v2.6.8/css/layui.css">
<script type="text/javascript" src="/static/extends/layui-v2.6.8/layui.js"></script>
<script>
    layui.use(['laydate'],function () {
        let laydate = layui.laydate;
        laydate.render({
            elem:'#dateTime',
            type:'month'
            ,done: function(value, date, endDate){
                window.location.href = "{:url('')}?dateTime="+value;
            }
        })
    })
</script>
</body>
</html>
